<template>
  <div ref="pieChart"></div>
</template>

<script>
  import resize from '@/mixins/resize';
  import echarts from 'echarts';

  export default {
    name: 'lineChart',
    props: {
      // chartData: {
      //   type: Array,
      //   required: true
      // }
    },
    mixins: [resize],
    data() {
      return {
        option:{
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [820, 932, 901, 934, 1290, 1330, 1320],
              type: 'line',
              areaStyle: {}
            }
          ]
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initEchart();
      });

    },
    methods: {
      initEchart() {
        this.myChart = echarts.init(this.$refs.pieChart);
        this.myChart.setOption(this.option)
        this.myChart.resize();
      }
    },
    watch: {
      // chartData: {
      //   handler(nl, ol) {
      //     this.initEchart();
      //   },
      //   deep: true
      // }
    }
  };
</script>
